<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
    <title>文字自适应</title>
    <style type="text/css">
        body{
            margin: 0;
            font-size: 62.5%;
        }
        .page{
            width: 100%;
            font-size: 1.3em;
        }
    </style>
</head>
<body>
<div class="page">我们拿到手的移动端网页的设计稿通常是640px宽，文字大小也通常是26px。而你实际写的网页是320px宽，文字13px大小。div和图片的宽高，可以通过设计稿的百分比得出，而文字</div>


<script type="text/javascript">
    function $(str) {
        return document.querySelectorAll(str);
    }

    var body_width = window.innerWidth;
    var rate = body_width / 320;

    $(".page")[0].style.fontSize = rate*(1.3) + "em";

    console.log(body_width);
    console.log(rate);
    console.log($(".page")[0]);
</script>
</body>
</html>